<template>
  <div class="wrap">
    <div id="map"></div>
    <button
      style="
        position: fixed;
        width: 100px;
        height: 100px;
        backgroundcolor: #f40;
      "
      @click="drawRect"
    >
      rect
    </button>
  </div>   

</template>
<script>
mapboxgl.accessToken =
  'pk.eyJ1IjoiYXJjaGl0ZWN0Z3VhbiIsImEiOiJja200dmV2aHIwN2IyMnBxdGZ4bHFiaHc1In0.QAIUvcxoYsFO0CU5RlAdRA'
import DrawRectangle from './RectAngle'
export default {
  data() {
    return {
      map: null,
      modes: null,
      draw: null,
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        center: [-91.874, 42.76], // starting position [lng, lat]
        zoom: 12, // starting zoom
      })
      this.initDraw()
      this.map.on('draw.create',()=>{
        this.map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "MyBuildName": "12啊飒飒的"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [-91.874, 42.76]
                            }
                        }]
                    }
                },
                 "layout": {
                    "text-field": "{MyBuildName}",//文本内容来源字段
                    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],//字体
                    "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
                    "text-anchor": "top",//标记文本相对于定位点的位置
                    "text-size": 12,//字号
                     "icon-image": "yoimage",
                    "icon-size": 0.5,//图标的大小
                },
            });
      })
    },

    initDraw() {
      this.modes = MapboxDraw.modes
      this.modes.draw_rectangle = DrawRectangle
      this.draw = new MapboxDraw({
        modes: this.modes,
        styles: [
          {
            id: 'gl-draw-polygon-fill-inactive', // 指定多边形非选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static']
            ],
            paint: {
              'fill-color': '#5ebe7f',
              'fill-outline-color': 'green',
              'fill-opacity': 0.4
            }
          },
          {
            id: 'gl-draw-polygon-fill-active', // 指定多边形选中状态图层样式
            type: 'fill',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon']
            ],
            paint: {
              'fill-color': 'blue',
              'fill-outline-color': 'blue',
              'fill-opacity': 0.1
            }
          },
          {
            id: 'gl-draw-polygon-midpoint', // 多边形顶点样式
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'meta', 'midpoint']
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b'
            }
          },
          {
            id: 'gl-draw-polygon-stroke-inactive', // 多边形非激活状态轮廓线样式
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Polygon'],
              ['!=', 'mode', 'static']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': '#f40',
              'line-width': 2,
              'line-dasharray': [0.2, 2],
            }
          },
          {
            id: 'gl-draw-polygon-stroke-active',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'true'],
              ['==', '$type', 'Polygon']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': 'blue',
              'line-dasharray': [0.2, 2],
              'line-width': 2
            }
          },
          {
            id: 'gl-draw-line-inactive',
            type: 'line',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'LineString'],
              ['!=', 'mode', 'static']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': '#3bb2d0',
              'line-width': 2
            }
          },
          {
            id: 'gl-draw-line-active',
            type: 'line',
            filter: [
              'all',
              ['==', '$type', 'LineString'],
              ['==', 'active', 'true']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': '#fbb03b',
              'line-dasharray': [0.2, 2],
              'line-width': 2
            }
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static']
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fff'
            }
          },
          {
            id: 'gl-draw-polygon-and-line-vertex-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'meta', 'vertex'],
              ['==', '$type', 'Point'],
              ['!=', 'mode', 'static']
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#fbb03b'
            }
          },
          {
            id: 'gl-draw-point-point-stroke-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static']
            ],
            paint: {
              'circle-radius': 5,
              'circle-opacity': 1,
              'circle-color': '#fff'
            }
          },
          {
            id: 'gl-draw-point-inactive',
            type: 'circle',
            filter: [
              'all',
              ['==', 'active', 'false'],
              ['==', '$type', 'Point'],
              ['==', 'meta', 'feature'],
              ['!=', 'mode', 'static']
            ],
            paint: {
              'circle-radius': 3,
              'circle-color': '#3bb2d0'
            }
          },
          {
            id: 'gl-draw-point-stroke-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['==', 'active', 'true'],
              ['!=', 'meta', 'midpoint']
            ],
            paint: {
              'circle-radius': 7,
              'circle-color': '#fff'
            }
          },
          {
            id: 'gl-draw-point-active',
            type: 'circle',
            filter: [
              'all',
              ['==', '$type', 'Point'],
              ['!=', 'meta', 'midpoint'],
              ['==', 'active', 'true']
            ],
            paint: {
              'circle-radius': 5,
              'circle-color': '#fbb03b'
            }
          },
          {
            id: 'gl-draw-polygon-fill-static',
            type: 'fill',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon']
            ],
            paint: {
              'fill-color': '#404040',
              'fill-outline-color': '#404040',
              'fill-opacity': 0.1
            }
          },
          {
            id: 'gl-draw-polygon-stroke-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'Polygon']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2
            }
          },
          {
            id: 'gl-draw-line-static',
            type: 'line',
            filter: [
              'all',
              ['==', 'mode', 'static'],
              ['==', '$type', 'LineString']
            ],
            layout: {
              'line-cap': 'round',
              'line-join': 'round'
            },
            paint: {
              'line-color': '#404040',
              'line-width': 2
            }
          },
          {
            id: 'gl-draw-point-static',
            type: 'circle',
            filter: ['all', ['==', 'mode', 'static'], ['==', '$type', 'Point']],
            paint: {
              'circle-radius': 5,
              'circle-color': '#404040'
            }
          }
        ]
      })
      console.log(this.draw);
      this.map.addControl(this.draw)
    },
    drawRect(){
      this.draw.changeMode('draw_rectangle')
    }
  },
}
</script>
<style lang="less" scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
</style>
